<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: #ccc;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab {
            width: 485px;
            margin: 200px auto;
            cursor: pointer
        }
        
        li {
            list-style: none;
        }
        
        .tab_list {
            width: 100%;
            height: 50px;
            line-height: 50px;
            /* background-color: #ccc; */
            /* border-bottom: 2px solid #ff6700; */
        }
        
        .tab li {
            float: left;
            padding: 0 10px;
        }
        
        .current {
            border-bottom: 2px solid #ff6700;
            /* background-color: rgb(224, 138, 138); */
            color: #ff6700;
        }
        /* .item {
            display: none;
        } */
        /* .tab_con img {
            width: 485px;
        } */
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">
                    商品介绍
                </li>
                <li>规格与包装</li>
                <li>售货保障</li>
                <li>商品评价(1230)</li>
                <li>手机社区</li>
            </ul>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 给5个li添加索引号
            lis[i].setAttribute('index', i);
            // onmouseover鼠标经过  onclick鼠标点击
            lis[i].onmouseover = function() {
                // 1.干掉其他li的 class
                for (var i = 0; i < lis.length; i++) {
                    // 里面每一个li样式为空
                    lis[i].className = '';
                }
                // 2.点击获得样式
                this.className = 'current';

            }
        }
    </script>
</body>

</html>